<template>
  <div class="record">
    <div v-for="(item, index) in list" :key="index" class="record-item">
      <div class="cicle"><i class="V7_iconfont V7_iconV7tubiao_jilu"></i></div>
      <div class="record-content">
        <span v-html="item.logContent"></span><span v-if="item.toActivityName">&nbsp;&nbsp;{{item.toActivityName}}</span>
        <template v-if="item.assignLogList && item.assignLogList.length">
          <span class="range blue-font" v-for="assign in item.assignLogList" :key="assign.assignId">
            <template v-if="assign.type === 1">
              {{ userObj[assign.assignId].name }}
            </template>
            <template v-if="assign.type !== 1 && item.flowEventType !== 'autoAssign'">
              {{ assign.type === 2 ? depMap[assign.assignId].name : assign.type === 4 ? queueMap[assign.assignId].name : serveMap[assign.assignId].name}}
            </template>
          </span>
        </template>
      </div>
      <div v-if="item.remark" style="margin-bottom: 12px">备注：{{item.remark}}</div>
      <template v-if="item.updateRecordLogs">
        <div v-for="(log, index) in item.updateRecordLogs" :key="index" class="margin-b-10">
          <div v-if="associateList.indexOf(log.fieldType)>-1">将&nbsp;&nbsp;
            <span class="blue-font">{{log.fieldName}}</span>&nbsp;&nbsp;字段
            <template v-if="log.associationTableUpdateLog && log.associationTableUpdateLog.addCount">新增了{{log.associationTableUpdateLog.addCount || 0}}条</template>
            <template v-if="log.associationTableUpdateLog && log.associationTableUpdateLog.deleteCount">删除了{{log.associationTableUpdateLog.deleteCount || 0}}条</template>
          </div>
          <div v-else-if="log.fieldType === 'accessory'">
            将&nbsp;&nbsp;<span class="blue-font">{{log.fieldName}}</span>&nbsp;&nbsp;字段由&nbsp;&nbsp;
            <uploadList
              style="margin-top: 8px"
              :list="log.oldValue"
              :isHiddenDelBtn="true"
              v-if="log.oldValue && log.oldValue.length !== 0"
            ></uploadList>
            <span v-else>空</span>变更为<uploadList style="margin-top: 8px"
											:list="log.newValue"
											:isHiddenDelBtn="true"
											v-if="log.newValue && log.newValue.length !== 0"
										></uploadList>
          </div>
          <div v-else>将&nbsp;&nbsp;<span class="blue-font">{{log.fieldName}}</span><span v-if="log.businessId !== 'master'">&nbsp;&nbsp;字段由&nbsp;&nbsp;</span>{{logOldValue(log, 'oldValue')}}&nbsp;&nbsp;变更为&nbsp;&nbsp;{{logOldValue(log, 'newValue')}}</div>
        </div>
      </template>
      <div class="time" v-html="item.eventTime"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
import uploadList from '@/afterSales/components/uploader/uploadList.vue'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'
@Component({
  name: 'history',
  components: {
    uploadList
  }
})
export default class Queue extends Vue {
  [x: string]: any
  @Prop(Array) public fieldList!: any
  @Prop(Object) public form!: any
  private list = []
  private associateList = ['associateSpare', 'associateUser', 'associateService']

  private get fieldMap () {
    const obj: any = {}
    this.fieldList.map(item => {
      obj[item.businessId] = item.name
    })
    return obj
  }

  private get serveMap () {
    return busConfigStore.serviceMap
  }

  private get depMap () {
    return (CommonModule as any).publicCache.departmentListObj
  }

  private get queueMap () {
    return (CommonModule as any).publicCache.queueListObj
  }

  private get userObj () {
    return CommonModule.publicCache.userListObj
  }

  private get logOldValue () {
    return (value, type) => {
      if (value.businessId === 'master') {
        return this.userObj[value[type]].name
      } else {
        return value[type] || '空'
      }
    }
  }

  private queryList () {
    const data = {
      orderId: this.form.id
    }
    commonAction({
      url: '/server-work/action/log/list',
      method: 'post',
      data
    }).then(res => {
      if (res.success) {
        const list = res.data?.logList || []
        list.forEach(item => {
          if (item.flowEventType !== 'autoAssign') {
            let name = ''
            if (item.userNameH5) {
              name = item.userNameH5
            } else {
              const agentObj = CommonModule.publicCache.userListObj[item.userId]
              name = agentObj ? agentObj.name : '--'
            }
            item.logContent = `<span style="color: #008bee">${name}</span> ${item.logContent}`
          }
        })
        this.list = list
      }
    })
  }

  private mounted () {
    this.queryList()
  }
}
</script>

<style lang="stylus" scoped>
.margin-b-10
  margin-bottom: 10px
.blue-font
  margin-right: 10px
  color: #008bee
.cicle
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  color: #fff;
  position: absolute;
  align-items: center;
  background: #008BEE;
  border-radius: 50%;
  top: -12px;
  left: 20px;
  box-shadow: 0px 1px 6px 0px rgba(98,172,224,0.56);
  .V7_iconfont
    font-size 12px
.record-item
  position relative
  margin-bottom: 35px
  border: 1px solid #ECF0F3
  border-radius: 4px
  padding: 0px 24px 16px 60px;
  .record-content
    padding-top: 16px;
    font-weight: 500;
    color: #303753;
    padding-bottom: 14px;
    border-bottom: 1px solid #ECF0F3;
    margin-bottom: 14px;
  .time
    font-weight: 400;
    color: #686E84;
.record-item:not(:last-child):after
    position: absolute;
    content: '';
    width: 1px;
    left: 30px;
    height: 35px;
    bottom: -36px;
    background-color: #ecf0f3;
</style>
